<template>
	<view class="head">

		<view class="head-left">
			<view class="head-name">
				<view class="lishang">
					<text v-if="userToken">{{ nickname }}</text>
					<text v-else>未登录</text>
				</view>
				<view class="vip" v-if="userToken">
					尊贵{{ memberInfo == null || memberInfo.levelName == null ? '会员' : memberInfo.levelName}}
				</view>
			</view>
			<view class="start" v-if="userToken">
				会籍始于{{ createYear }}年
			</view>
		</view>

		<view class="head-right" v-if="userToken">
			<image src="/static/images/HiltonHotel/QRCode.png" mode="" class="qr-code" @click="goToMembershipCodePage">
			</image>
			<view class="member-code" @click="goToMembershipCodePage">
				会员码
			</view>
		</view>

	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		navigateTo,
	} from "../../utils/promise"
	
	export default {
		props:{
			memberInfo:{}
		},	
		data() {
			return {
			}
		},
		computed: {
			...mapState(['userInfo', 'userToken']),
			nickname() {
				return this.userInfo.nickname
			},
			createYear() {
				return this.userInfo.createTime.split('-')[0]
			},
			levelName() {
				return this.userInfo.levelName || '会员'
			}
		},
		methods: {
			goToMembershipCodePage() {
				uni.navigateTo({
					url: "/pages/MembershipCodePage/MembershipCodePage"
				})
			},
			navigateTo,
		},
	}
</script>
<style lang="less" scoped>
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 690rpx;
		margin: 32.56rpx auto;
		margin-bottom: 0;
		padding: 30rpx;
		height: 154rpx;
		background: linear-gradient(90.16deg, #0F4C97 0.12%, #0F4C97 99.86%);
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;

		.head-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
		}

		.head-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			height: 100%;
		}

		.head-name {
			display: flex;
			align-items: flex-end;
			column-gap: 14rpx;
		}

		.lishang {
			font-family: 'PingFang SC';
			font-weight: 600;
			font-size: 40rpx;
			letter-spacing: 0px;
			color: #FFFFFF;
			
			max-width: 360rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.start {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 22rpx;
			letter-spacing: 0px;
			color: #FFFFFF;
		}

		.vip {
			text-align: center;
			width: 176rpx;
			height: 48rpx;
			border-radius: 36rpx;
			background: #E1E9F2;
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			line-height: 48rpx;
			letter-spacing: 0px;
			color: #7489B1;
		}

		.qr-code {
			width: 48rpx;
			height: 48rpx;
		}

		.member-code {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			letter-spacing: 0px;
			text-align: right;
			color: #FFFFFF;
		}
	}
</style>